
<template>
  <!-- 订单管理 -->
  <div class="order-manager">
    <!-- 操控区 -->
    <div class="handler-box">
      <div class="inputs">
        <el-input
          v-model="orderNo"
          placeholder="请输入内容"
          @change="query"
        ></el-input>

        <template>
          <el-select v-model="orderStatus" placeholder="全部" @change="query">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </div>

      <el-button
        type="success"
        icon="el-icon-s-home"
        size="medium"
        @click="checkDone"
      >
        配货完成
      </el-button>
      <el-button
        type="success"
        icon="el-icon-s-home"
        size="medium"
        @click="checkOut"
      >
        出库完成
      </el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="medium"
        @click="orderClose"
      >
        关闭订单
      </el-button>
    </div>

    <!-- 表格区 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="changeSelects"
    >
      <el-table-column type="selection" min-width="5%" align="center">
      </el-table-column>
      <el-table-column prop="orderNo" label="订单号" min-width="20%">
      </el-table-column>
      <el-table-column
        prop="totalPrice"
        label="订单总价"
        min-width="10%"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="订单状态"
        min-width="10%"
        align="center"
      >
        <template #default="{ row }">
          <el-link v-if="row.orderStatus == -1">手动关闭</el-link>
          <el-link v-if="row.orderStatus == 0">待支付</el-link>
          <el-link v-if="row.orderStatus == 1">已支付</el-link>
          <el-link v-if="row.orderStatus == 2">配货完成</el-link>
          <el-link v-if="row.orderStatus == 3">出库成功</el-link>
          <el-link v-if="row.orderStatus == 4">交易成功</el-link>
                       
        </template>
      </el-table-column>
      <el-table-column
        prop="payType"
        label="支付方式"
        min-width="10%"
        align="center"
      >
        <template #default="{ row }">
          <el-link v-if="row.payType == 0">未支付</el-link>
          <el-link v-if="row.payType == 1">微信支付</el-link>
          <el-link v-if="row.payType == 2">支付宝支付</el-link>          
        </template>
      </el-table-column>

      <el-table-column
        prop="updateTime"
        label="创建时间"
        min-width="20%"
        align="center"
        :formatter="formatterTime"
      >
      </el-table-column>

      <el-table-column label="操作" min-width="25%">
        <template #default="{ row }">
          <el-link
            :underline="false"
            type="success"
            v-if="row.orderStatus === 1"
            @click="checkDone([row.orderId])"
          >
            配货
          </el-link>
          <el-link
            type="success"
            v-if="row.orderStatus === 2"
            @click="checkOut([row.orderId])"
          >
            出库
          </el-link>

          <el-link
            :underline="false"
            type="danger"
            v-if="row.orderStatus !== 3 && row.orderStatus !== -1"
            @click="orderClose([row.orderId])"
          >
            关闭订单
          </el-link>

          <!--   <el-popconfirm title="确定关闭订单吗？" v-if="row.orderStatus !== -1">
            <el-link type="primary" slot="reference">关闭订单</el-link>
          </el-popconfirm> -->

          <router-link
            :to="{ path: 'order-detail', query: { id: row.orderId } }"
          >
            <el-link type="warning"> 订单详情 </el-link>
          </router-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区 -->
    <el-pagination
      background
      layout="prev, pager, next"
      align="center"
      :total="total"
      :page-size="pagesize"
      :current-page="page"
      :hide-on-single-page="true"
      @current-change="paginationChange"
      @prev-click="paginationChange"
      @next-click="paginationChange"
    >
    </el-pagination>
  </div>
</template>

<script>
import { formatTime } from "@/assets/utils";
export default {
  name: "order-manager",
  data() {
    return {
      total: 0,
      page: 1,
      pagesize: 10,
      orderNo: "",
      orderStatus: "",
      tableData: [],
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "待支付",
        },
        {
          value: 1,
          label: "已支付",
        },
        {
          value: 2,
          label: "配货完成",
        },
        {
          value: 3,
          label: "出库成功",
        },
        {
          value: 4,
          label: "交易成功",
        },
        {
          value: -1,
          label: "手动关闭",
        },
      ],
      selects: [],
    };
  },
  methods: {
    //获取数据
    async query() {
      try {
        let { resultCode, data } = await this.$api.OrderManager.orders(
          this.page,
          this.pageSize,
          this.orderNo,
          this.orderStatus
        );

        if (+resultCode !== 200) {
          this.tableData = [];
          return;
        }

        let { totalCount, list } = data;
        this.tableData = list;
        console.log(this.tableData);
        this.total = totalCount;
      } catch (_) {
        this.tableData = [];
        this.total = 0;
      }
    },
    //改变选中项
    changeSelects(val) {
      this.selects = val.map((item) => item.orderId);
    },
    //配货
    async checkDone(ids) {
      let data,
        selects = this.selects;
      if (ids.length === 1) {
        data = await this.$api.OrderManager.checkDone(ids);
      } else {
        data = await this.$api.OrderManager.checkDone(selects);
      }
      let { resultCode } = data;
      if (+resultCode !== 200) {
        this.$message.error("配货失败,请您稍后再试!");
        return;
      }
      this.$message.success("恭喜您,配货成功");
      this.query();
    },
    //出库
    async checkOut(ids) {
      let data,
        selects = this.selects;
      if (ids.length === 1) {
        data = await this.$api.OrderManager.checkOut(ids);
      } else {
        data = await this.$api.OrderManager.checkOut(selects);
      }
      let { resultCode } = data;
      if (+resultCode !== 200) {
        this.$message.error("出库失败,请您稍后再试!");
        return;
      }
      this.$message.success("恭喜您,出库成功");
      this.query();
    },
    //关闭订单
    async orderClose(ids) {
      let data,
        selects = this.selects;
      if (ids.length === 1) {
        data = await this.$api.OrderManager.orderClose(ids);
      } else {
        data = await this.$api.OrderManager.orderClose(selects);
      }
      let { resultCode } = data;
      if (+resultCode !== 200) {
        this.$message.error("关闭订单失败,请您稍后再试!");
        return;
      }
      this.$message.success("恭喜您,关闭订单成功");
      this.query();
    },
    //格式化时间
    formatterTime(row) {
      return formatTime(row.createTime, "{1}-{2} {3}:{4}");
    },
    //分页
    paginationChange(val) {
      this.page = +val;
      this.query();
    },
  },
  created() {
    this.query();
  },
  /* 状态第二种方法，订单状态，支付方法 */
  /*   computed: {
    ordersData() {
      return this.tableData.map((item) => {
        //-1手动关闭 0待支付 1已支付 2配货完成 3出库成功 4交易成功
        if (+item.orderStatus === -1) item.orderStatus = "手动关闭";
        if (+item.orderStatus === 0) item.orderStatus = "待支付";
        if (+item.orderStatus === 1) item.orderStatus = "已支付";
        if (+item.orderStatus === 2) item.orderStatus = "配货完成";
        if (+item.orderStatus === 3) item.orderStatus = "出库成功";
        if (+item.orderStatus === 4) item.orderStatus = "交易成功";

        //0未支付 1微信支付 2支付宝支付
        if (+item.payType === 0) item.payType = "未支付";
        if (+item.payType === 1) item.payType = "微信支付";
        if (+item.payType === 2) item.payType = "支付宝支付";
        return item;
      });
    },
  }, */
};
</script>

<style lang="less" scoped>
.handler-box {
  display: flex;

  .inputs {
    display: flex;
  }
}

/deep/.el-input__inner {
  width: 200px;
  height: 32px;
  margin-right: 12px;
  line-height: 32px;
}
/deep/.el-link--inner {
  margin-right: 10px;
}
</style>